<template>
	<div>
		<!-- 功能一模板 -->
		<button @click="show">显示</button>
		<button @click="hide">隐藏</button>
		<div v-if="showDiv">一个被控制显隐的div</div>
	</div>
	<div>
		<!-- 功能二模板 -->
		<button @click="changeRed">红色</button>
		<button @click="changeYellow">蓝色</button>
		<div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			showDiv: true, // 功能一数据
			fontColor: '', // 功能二数据
		}
	},
	methods: {
		// 功能一方法
		show() {
			this.showDiv = true
		},
		hide() {
			this.showDiv = false
		},
		// 功能二方法
		changeRed() {
			this.fontColor = 'red'
		},
		changeYellow() {
			this.fontColor = 'blue'
		},
	},
}
</script>
